<template>
  <div style="height: 1500px">
    <div class="app-container" style="position: absolute">
      <el-form label-width="200px">
        <el-form-item label="分类Excel模板文件下载">
          <el-tag type="info">Excel模版</el-tag>
          <el-tag>
            <i class="el-icon-download"/>
            <a :href="'/static/class.xlsx'">点击下载模版</a>
          </el-tag>

        </el-form-item>

        <el-form-item label="选择Excel文件">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError"
            :disabled="importBtnDisabled"
            :limit="1"
            :action="BASE_API+'/itservice/articleadmin/addClasses'"
            name="file"
            accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button
              :loading="loading"
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload">上传到服务器</el-button>
          </el-upload>

        </el-form-item>
        <span style="font-size: medium; color: #d51ef5; margin-left: 40px">下载的模板文件应删除原所有分类，只填写标题和添加的分类名称</span>
        <div style="margin-left: 100px;margin-top: 50px">
          <el-button @click="showArticleByDifficulity(0)" type="success" size="small" style="margin-bottom: 10px;margin-right:5px">简单</el-button>
          <el-button @click="showArticleByDifficulity(1)" type="primary" size="small" style="margin-bottom: 10px;margin-right:5px">中等</el-button>
          <el-button @click="showArticleByDifficulity(2)" type="danger" size="small" style="margin-left:5px;margin-right:5px">困难</el-button>
        </div>
      </el-form>
    </div>

    <div class="app-container" style="position: absolute; margin-left: 700px">
      <el-input v-model="filterText" placeholder="keyword" style="margin-bottom:10px;" />

      <el-tree
        ref="tree"
        :data="data"
        node-key="title"
        @node-click="handleNodeClick"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"></el-tree>

    </div>
  </div>
</template>

<script>
import articleApi from '@/api/article'
export default {
  data() {
    return {
      // 上传分类
      BASE_API: process.env.BASE_API, // 接口API地址
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false,

      // 分类
      filterText: '',
      data: [], // 返回所有分类
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created() {
    this.getAllArticleClasses()
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },

  methods: {

    showArticleByDifficulity(difficult) {
      this.$router.push({ path: '/article/list/'+difficult })
    },

    // 点击树形节点跳转查看分类列表
    handleNodeClick (node, e) {

      let isLeaf = e.isLeaf
      let nodeId = node.id
      // 叶子节点，代表二级分类
      if (isLeaf) {
        // 二级分类
        this.$router.push({ path: '/article/list/'+nodeId })
      }
    },

    // 点击按钮上传文件到接口里面
    submitUpload() {
      this.importBtnDisabled = true
      this.loading = true
      this.$refs.upload.submit()
    },

    // 上传成功
    fileUploadSuccess(response) {
      this.loading = false
      this.$message({
        type: 'success',
        message: '添加课程分类成功'
      })
      // 跳转课程分类列表
      // 路由跳转
      this.$router.push({ path: '/article/classes' })
    },
    // 上传失败
    fileUploadError(response) {
      this.loading = false
      this.$message({
        type: 'error',
        message: '添加课程分类失败'
      })
    },

    getAllArticleClasses() {
      articleApi.getAllArticleClasses()
        .then((response) => {
          this.data = response.data.list
        })
    },

    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    }
  }
}
</script>
